<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	<link rel="stylesheet" href="../../component/layui/css/layui.css" media="all" />
</head>

<body class="pear-container">
	<div class="layui-row layui-col-space10">
		<div class="layui-card layui-col-md4">
			<div class="layui-row layui-col-space10">
				<div class="layui-card-body" style="height: 400px;">
					<form id="form" class="layui-form"
						action="http://localhost/LSTM_car_comment/public/web/sjjc/keywords">
						<div class="layui-form-item">
							<p style="font-size: 20px; text-align: center;">请选择您要查看的信息</p>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">车型</label>
							<div class="layui-input-block">
								<input type="checkbox" name="carModel[]" title="奥迪A4L" value="奥迪A4L" lay-skin="primary">
								<input type="checkbox" name="carModel[]" title="奥迪A3 " value="奥迪A3" lay-skin="primary">
								<input type="checkbox" name="carModel[]" title="奥迪A5 " value="奥迪A5" lay-skin="primary">
								<input type="checkbox" name="carModel[]" title="奥迪A6L" value="奥迪A6L" lay-skin="primary">
								<input type="checkbox" name="carModel[]" title="奥迪A7 " value="奥迪A7" lay-skin="primary">
								<input type="checkbox" name="carModel[]" title="奥迪Q3 " value="奥迪Q3" lay-skin="primary">
								<input type="checkbox" name="carModel[]" title="奥迪Q5L" value="奥迪Q5L" lay-skin="primary">
								<input type="checkbox" name="carModel[]" title="奥迪Q7 " value="奥迪Q7" lay-skin="primary">
								<input type="checkbox" name="carModel[]" title="奥迪S5 " value="奥迪S5" lay-skin="primary">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">主题</label>
							<div class="layui-input-block">
								<input type="checkbox" name="Theme[]" title="油耗" value="油耗" lay-skin="primary">
								<input type="checkbox" name="Theme[]" title="空间" value="空间" lay-skin="primary">
								<input type="checkbox" name="Theme[]" title="动力" value="动力" lay-skin="primary">
								<input type="checkbox" name="Theme[]" title="操控" value="操控" lay-skin="primary">
								<input type="checkbox" name="Theme[]" title="外观" value="外观" lay-skin="primary">
								<input type="checkbox" name="Theme[]" title="内饰" value="内饰" lay-skin="primary">
								<input type="checkbox" name="Theme[]" title="舒适性" value="舒适性" lay-skin="primary">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">起始日期</label>
							<div class="layui-input-inline">
								<input type="text" name="startDate" id="sDate" lay-verify="date" placeholder="请输入日期"
									autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">截止日期</label>
							<div class="layui-input-inline">
								<input type="text" name="endDate" id="eDate" lay-verify="date" placeholder="请输入日期"
									autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit lay-filter="submit">查看</button>
								<button type="reset" class="layui-btn layui-btn-primary">重置</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="layui-card layui-col-md8">
			<div class="layui-row layui-col-space10">
				<div class="layui-card-body">
					<div id="wordCloudChart" style="width: 100%;height: 400px;"> </div>
				</div>
			</div>

		</div>

	</div>
	<script src="../../mini/lib/wordcloud/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../mini/lib/wordcloud/worldcloud.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../component/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['form', 'laydate'], function () {
			var $ = layui.jquery;
			var form = layui.form;
			var laydate = layui.laydate;
			form.render();
			laydate.render({
				elem: '#sDate',
				trigger: 'click'
			});
			laydate.render({
				elem: '#eDate',
				trigger: 'click'
			});
			//词云初始化
			$.get('http://localhost/LSTM_car_comment/public/web/sjjc/wordsCloudInit', function (data) {
				console.log(data);
				var data2 = new Array();
				for (var i = 0; i < data.length; i++) {
					data2.push(data[i].KeyWords);
				}
				console.log(data2);
				setData(data2);
			});
			//表单提交
			form.on('submit(submit)', function (data) {
				$.post('http://localhost/LSTM_car_comment/public/web/sjjc/wordsCloudUpdate', data.field,
					function (res) {
						//res就是返回的结果
						console.log(res);
						var data2 = new Array();
						for (var i = 0; i < res.length; i++) {
							data2.push(res[i].KeyWords);
						}
						console.log(data2);
						setData(data2);
					});
				return false;
			});

		});
		//词云
		//传入echarts中的data
		var dataList = [];
		//初始词的大小
		var initVal = 9999
		//添加一个数据
		function setData(wordsArr) {
			dataList = [];
			//所有页面输入的词
			//按行分割成数组
			for (var i = 0; i < wordsArr.length; i++) {
				var word = wordsArr[i];
				//每次生成的词大小降低30%
				initVal = initVal * 0.6
				//数据封装到json对象，添加到list中
				var appendData = {
					name: word,
					value: initVal,
					itemStyle: createRandomItemStyle()
				}
				dataList.push(appendData)
			}

			world_cloud(dataList);

		}
		//随机生成词的颜色
		function createRandomItemStyle() {
			return {
				normal: {
					color: 'rgb(' + [
						Math.round(Math.random() * 160),
						Math.round(Math.random() * 160),
						Math.round(Math.random() * 160)
					].join(',') + ')'
				}
			};
		}
		//生成词图
		function world_cloud(dataList) {
			var myChart = echarts.init(document.getElementById('wordCloudChart'));
			var option = {
				tooltip: {},
				series: [{
					type: 'wordCloud',
					shape: 'smooth',
					gridSize: 2,
					sizeRange: [20, 100],
					rotationRange: [0, 0],
					textStyle: {
						normal: {
							color: function () {
								return 'rgb(' + [Math.round(Math.random() * 160),
								Math.round(Math.random() * 160),
								Math.round(Math.random() * 160)
								]
									.join(',') + ')';
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowColor: '#333'
						}
					},
					data: dataList
				}]
			}
			myChart.setOption(option);
		}
	</script>

</html>